<template>
	<view class="Warpper">
		<navBar bgColor="transparent" :Bot="false">
			<!-- <template #right_Bar>
				<view class="height d-flex a-center" @click="toUrl('service')">
					<image src="../static/DH.png" mode="aspectFill" class="communImg"></image>
				</view>
			</template> -->
		</navBar>

		<view class="content" :style="{ backgroundImage: `url(${staticImg('bj.png')})` }">
			<view class="Counselor">
				<image :src="staticImg('niu1.png')" mode="aspectFit" class="niuImg"></image>
				<text class="attorney">{{ infoData.realName }}律师您好：</text>
			</view>
			<view class="Tipbox"
				>{{ lawyerTips }}
				<view class="tabBox">
					<view class="tag_txt">祝您 好运</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="messageBox" @scrolltolower="scrolltolower">
				<view
					class="messList"
					v-for="(item, index) in pageData"
					:key="index"
					@click="toChat(item)">
					<image :src="staticImg('XX.png')" mode="aspectFill" class="messXX"></image>
					<view class="flex-1 ellipsis_1 messText">{{ item.noticeTitle }}</view>
					<view class="iconfont icon-a-zujian32 color-999 size26"></view>
				</view>
				<!-- <view class="messList">
					<image :src="staticImg('XX.png')" mode="aspectFill" class="messXX"></image>
					<view class="flex-1 ellipsis_1 messText">测试消息</view>
					<view class="iconfont icon-a-zujian32 color-ccc size26"></view>
				</view> -->
			</scroll-view>
		</view>

		<tab-bar :tab="0" />
	</view>
</template>

<script setup>
	import TabBar from './components/TabBar.vue';
	import { toUrl, Toast, staticImg } from '@/utils/utils.js';
	import { lawyerInfo } from '@/utils/api.js';
	import { ref } from 'vue';
	import Http from '@/utils/request.js';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';
	const mainStore = useMainStore();
	const infoData = ref('');
	const lawyerTips = ref('');
	const page = ref(1);
	const limit = ref(10);
	const getMore = ref(true);
	const pageData = ref([]);

	onLoad(async () => {
		const result = await lawyerInfo();
		infoData.value = result.data;
		lawyerTips.value = result.lawyerTips;
	});
	onShow(() => {
		page.value = 1;
		limit.value = 10;
		getMore.value = true;
		getNoticeList();
	});

	const getNoticeList = () => {
		Http.get({
			url: '/hr/getNoticeList',
			data: {
				page: page.value,
				limit: limit.value,
				create_by: 'order',
				is_read: 0,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.data.list || [];
			page.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (result.length < limit.value) getMore.value = false;
		});
	};

	const toChat = (Item) => {
		if (!Item.noticeUrl) return;
		toUrl(`/pages/chat/chat?chatId=${Item.noticeUrl}`);
	};

	const scrolltolower = () => {
		if (!getMore.value) return;
		page.value++;
		getNoticeList();
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: $page;
	}

	.communImg {
		width: 40rpx;
		height: 40rpx;
		padding-right: 20rpx;
	}

	.Warpper {
		width: 100%;
		height: 100vh;
		display: flex;
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
		flex-direction: column;

		.content {
			flex: 1;
			background-repeat: no-repeat;
			background-size: cover;
			display: flex;
			flex-direction: column;

			.Counselor {
				position: relative;
				margin: 260rpx 0 0 80rpx;

				.niuImg {
					width: 468rpx;
					height: 160rpx;
				}

				.attorney {
					color: #222;
					font-size: 36rpx;
					font-weight: 500;
					position: absolute;
					bottom: 10rpx;
					left: 140rpx;
				}
			}

			.Tipbox {
				width: 670rpx;
				background: #d6ecff;
				padding: 20rpx 120rpx 20rpx 20rpx;
				border: 1px solid #88bfef;
				border-radius: 0 20rpx 20rpx 20rpx;
				margin-left: 40rpx;

				color: #666;
				font-size: 28rpx;
				line-height: 46rpx;
				opacity: 0.9;
				position: relative;
			}

			.tabBox {
				width: 80rpx;
				height: 120rpx;
				position: absolute;
				top: -8rpx;
				right: 30rpx;

				.tag_txt {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					color: #fff;
					font-size: 26rpx;
					opacity: 1;
					padding-left: 10rpx;
					line-height: 40rpx;
				}
			}

			.tabBox:before {
				content: '';
				width: 0;
				height: 80rpx;
				border: 36rpx solid v-bind('mainStore.color');
				border-top: 0 solid;
				border-bottom: 28rpx solid rgba(0, 0, 0, 0);
				position: absolute;
				top: 0;
				left: 0;
			}

			// .tag {
			// 	width: 0;
			// 	height: 100rpx;
			// 	border: 36rpx solid v-bind('mainStore.color');
			// 	border-top: 0 solid;
			// 	border-bottom: 28rpx solid rgba(0, 0, 0, 0);

			// 	color: #fff;
			// 	font-size: 22rpx;
			// 	.tag_txt {
			// 		width: 100%;
			// 		border: 1rpx solid red;
			// 	}
			// }
		}
		.messageBox {
			width: 100%;
			padding: 20rpx 40rpx 0 40rpx;
			height: 800rpx;
			box-sizing: border-box;

			.messList {
				width: 100%;
				background-color: #ffecd3;
				border-radius: 10rpx;
				padding: 12rpx 20rpx;
				border: 1rpx solid #e7bb82;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.messXX {
					width: 30rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}
				.messText {
					color: #333;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
